<template>
  <!-- 首页 发现好歌单模块 -->
  <div class="musicList">
    <div class="musicList-top">
      <div class="title">发现好歌单</div>
      <div class="more">查看更多</div>
    </div>

    <div class="mlist">
      <div class="swiper mySwiper" id="musicListSwiper">
        <div class="swiper-wrapper">
          <router-link
            class="swiper-slide"
            v-for="(item, index) in state.musicList"
            :key="index"
            :to="{ path: '/listview', query: { id: item.id } }"
          >
            <img :src="item.picUrl" :alt="item.name" />
            <div class="name">{{ item.name }}</div>
            <div class="count">
              <span class="iconfont icon-bofang"></span>
              {{ changeValue(item.playCount) }}
            </div>
          </router-link>
        </div>
        <div id="swiper-pagination"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/swiper-bundle.min.css";
import { reactive, onMounted, onUpdated } from "vue"; //变量响应式
import BaseApi from "@/api/index.js";

/*
// vue2写法
export default {
  data() {
    return {
      musicList: [],
    };
  },
  setup() {},
  mounted() {
    this.getRecommendMusicList();
  },
  updated() {
    this.init();
  },
  methods: {
    async getRecommendMusicList() {
      let res = await BaseApi.getRecommendMusicList();
      this.musicList = res.data.result;
    },
    init() {
      var swiper = new Swiper("#musicListSwiper", {
        slidesPerView: 3,
        spaceBetween: 10,
      });
    },
    changeValue(num) {
      let res = 0;
      if (num >= 100000000) {
        res = num / 100000000;
        // 保留两位小数
        res = res.toFixed(2) + "亿";
      } else if (num >= 10000) {
        res = num / 10000;
        res = res.toFixed(2) + "万";
      }
      return res;
    },
  },
};
*/

// vue3写法
export default {
  data() {
    return {};
  },
  setup() {
    let state = reactive({ musicList: [] });

    function changeValue(num) {
      let res = 0;
      if (num >= 100000000) {
        res = num / 100000000;
        // 保留两位小数
        res = res.toFixed(2) + "亿";
      } else if (num >= 10000) {
        res = num / 10000;
        res = res.toFixed(2) + "万";
      }
      return res;
    }
    async function getRecommendMusicList() {
      let res = await BaseApi.getRecommendMusicList();
      state.musicList = res.data.result;
      // console.log(res.data.result);
    }
    function init() {
      var swiper = new Swiper("#musicListSwiper", {
        slidesPerView: 3,
        spaceBetween: 10,
      });
    }

    onMounted(() => {
      getRecommendMusicList();
    });

    onUpdated(() => {
      init();
    });

    return {
      changeValue,
      state,
    };
  },
};
</script>

<style lang="less" scoped>
.musicList {
  width: 7.5rem;
  padding: 0 0.4rem;
  .musicList-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1rem;
    .title {
      font-size: 0.35rem;
      line-height: 0.5rem;
      font-weight: 900;
    }
    .more {
      height: 0.4rem;
      line-height: 0.4rem;
      width: 1.3rem;
      text-align: center;
      font-size: 0.24rem;
      border: 1px solid #ccc;
      padding: 0 0.06rem;
      border-radius: 0.2rem;
    }
  }
  .mlist {
    .swiper-wrapper {
      width: 100%;
      height: 3rem;
      .swiper-slide {
        display: flex;
        flex-direction: column;
        position: relative;
        img {
          height: 2rem;
          border-radius: 0.1rem;
        }
        .name {
          height: 0.8rem;
          width: 100%;
          font-size: 0.24rem;
          line-height: 0.4rem;
          // 多行文本溢出隐藏
          display: -webkit-box; //弹性伸缩盒子模型
          overflow: hidden; //溢出隐藏
          -webkit-box-orient: vertical; //排列方式
          -webkit-line-clamp: 2; //文本行数
        }
        .count {
          font-size: 0.16rem;
          color: rgb(238, 238, 238);
          position: absolute;
          right: 0.05rem;
          top: 0.05rem;
        }
      }
    }
  }
}
</style>
